Con Explorer esta idea de mostrar los vídeos en ventana modal con Lytebox no funciona, sin embargo con Firefox el resultado es genial.
Ahí quedan las explicaciones por si son útiles en algún momento

Son varias las preguntas sobre la forma de presentar los vídeos.
Utilizo Lytebox un script que nos permite mostrar contenido en ventana modal. No es necesario añadir otros scripts y ese es el principal motivo por el que resulta más rápida la carga del blog.

Sus funciones parecen muy básicas y en realidad lo son, lo podemos usar en cualquier enlace, imagen, grupos de imágenes, slideshow, incluso añadir un iframe.La imposibilidad de mostrar vídeos es el punto negativo de Lytebox.

Con esa limitación y todo decidí añadir Lytebox y después con más calma averiguar la forma de mostrar vídeos aunque poco había que averiguar porque leyendo atentamente mi propia entrada llegué al punto donde decía "La posibilidad de añadir un iframe con la etiqueta rel="lyteframe" resulta muy útil cuando tratamos de mostrar una página si necesidad de salir del blog" pensé que si se puede mostrar página s también podía mostrarse vídeos.

Para añadir un iframe lo haríamos así:
<a href="iframe-único" rel="lyteframe" title="Título">texto o imagen</a>

Para escoger el tamaño que mostrará el vídeo le añadimos ancho y alto:
<a href="iframe-único" rel="lyteframe" title="Título"rev="width: 400px; height: 300px; scrolling: no;">texto o imagen</a>

En title añadimos el texto que aparece en la parte inferior a modo de título.
» Con width añadimos anchura y con height altura.
» Donde "texto o imagen" es el sitio donde añadimos la imagen que se muestra en caso de no desear texto.
» Añadimos una imagen con <img src="url-de-la-imagen">

Lo siguiente sería la url del vídeo que vamos a mostrar, en este caso lo que haremos será obtener el código del vídeo que You Tube nos proporciona algo así:

<object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/wRKPcx9Cpe8&hl=es&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/wRKPcx9Cpe8&hl=es&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object>

De todo ese código lo único que vamos a necesitar es lo marcado en negrita.
http://www.youtube.com/v/wRKPcx9Cpe8

Quedaría algo así:
<a href="http://www.youtube.com/v/wRKPcx9Cpe8" rel="lyteframe" title="Título"rev="width: 400px; height: 300px; scrolling: no;">texto o imagen</a>

Y lo veríamos así:
texto o imagen

Si en lugar de texto deseamos una imagen sustituimos el texto por <img src="url-de-la-imagen"> puede ser cualquier imagen pero yo quería lo más parecido a un vídeo. La única solución que encontré es la siguiente...

En un blog de pruebas añadimos el código del vídeo, una vez lo visualizamos en el blog hacemos una captura y esa será la imagen que mostraremos.


Imagen

Subimos esa imagen a Blogger, copiamos la url y la añadimos sustituyendo el texto de "texto o imagen" puede parecer demasiado laborioso pero el único paso que requiere mostrar el vídeo con este aspecto es la captura para conseguir la imagen.

Si no deseamos hacer captura lo podemos hacer con cualquier otra imagen que tengamos en nuestro PC.

Ejemplo con captura


Recién sacada del horno tenemos una opción más, es una aportación de J.Miur y sugiere obtener 4 posibles imágenes con la misma url del vídeo, ahorrando de esta forma tomar una captura.

http://www.youtube.com/v/wRKPcx9Cpe8



http://img.youtube.com/vi/wRKPcx9Cpe8/0.jpg
300x240




http://img.youtube.com/vi/wRKPcx9Cpe8/1.jpg
125x100




http://img.youtube.com/vi/wRKPcx9Cpe8/2.jpg
125x100




http://img.youtube.com/vi/wRKPcx9Cpe8/3.jpg
125x100


<a href="http://www.youtube.com/v/wRKPcx9Cpe8" rel="lyteframe" title="Título"rev="width: 300px; height: 240px; scrolling: no;"><img src="http://img.youtube.com/vi/wRKPcx9Cpe8/0.jpg" /></a>



Codi Global

Llevaba un tiempo buscadolo para mi blog de humor, me pondre manos a la obra.
Un abrazo

Responder
Unknown

:D o mi mae querida, qué buena idea, he tardado un rato en captarla (mis radares están medio desgastados solo por hoy)...muy bueno Gema...besitos

Responder
Jose

Muy bueno el post, Gem@, sacando de donde no hay. Yo hasta ahora lo había hecho en plan casero, enlazando una captura del vídeo, tal y como muestras tú aquí, con la página de youtube,pero sin que se me abriera en pantalla completa. Ahora, ya sé como hacerlo mejor. Gracias, guapa.

Responder
Jaime Trujillo Escobedo

Genial Gem@, me gustó mucho el efecto, creo que lo aplicaré ;)

Responder
Susy

Cada vez que me he encontrado esa forma de publicar un vídeo me he preguntado cómo lo hacían y, mira por donde, como no podía ser de otra manera, tú me lo pones en bandeja.

Aunque debo dar por sentado que antes de llevar a cabo lo que en este post explicas se ha de aplicar lo que en la entrada sobre el tema de las presentaciones "añadir Lytebox" explicabas, verdad?.

Te lo pregunto por que no vaya a ser que no y le ande dando vueltas y revueltas jajaja, ya me conoces.

Un beso.

Responder
Miguel Angel

¡Es lo que me hacia falta! Tengo que postear de golpe 6 videos y me estaba demorando pensando en lo que iba a tardar la pagina en cargar.. me acabas de salvar la vida.. lo pondre en practica!

Gracias!! :D

Responder
Gem@

yz Hola Sisco te recomiendo Lytebox si lo que buscas es una ventana modal, es la más liviana que he visto hasta ahora y aunque parezca muy laborioso todo esto que explico no lo es en absoluto :)

yz Besitos Graciela que tengas un buen día :)
(aquí ya noche)

yz Hola Jose, un enlace directo a la página es mucho más práctico, es cuestión de gustos añadir una ventana modal :)
Tengo en cuenta tu plantilla, voy a solucionar dos que tengo atrasadas así no dejo la tuya a medias ;)

yz Me alegra que te guste Jaime :)

yz Hola Susy estás en lo cierto, esta entrada sólo trata de orientar si deseamos añadir vídeos con Lytebox, pero es necesario antes añadir el script y los estilos de a ventana a la plantilla.
Si lo vas a probar espera un par de días que voy a actualizar la otra entrada para que no sea necesario alojar el script en un servicio externo ;)

Responder
Gem@

yz Escribíamos al mismo tiempo Miguel Angel ¡que bien que te sea tan útil!! :)

Responder
Susy

Vale Gem@,
como ves estaba pendiente de tu contestación así que esperaré y seguiré tus instrucciones.

Venga, buenas noches y un fuerte abrazo:)

Responder
Gem@

yz Ya veo Susy, te mantendré informada :)

Responder
Miguel Angel

Para empezar decirte que soy "Formador Ocupacional" (es que tengo dos cuentas) ya he puesto en practica tu consejo sobre como "esconder" tambien el video.. y perfecto!! :D

Solo llevo dos semanas con el blog (y 4 entradas) pero hay tanto que aprender.. menos mal que personas como tu no tendeis una mano.

Si alguien tiene curiosidad por un blog "todavia muy verde" :S (en mi defensa puedo decir que hago lo que puedo jajaja) pero si me dicen que en 2 semanas estoy modificando lineas y lineas de HTML no me lo creo jajaja

Si alguien tiene curiosidad, a vuestra disposición esta:

http://formadores-ocupacionales.blogspot.com/

Un saludo a todosss ¡¡¡

Responder
Raúl Montero

Hola,

me gustaría invitarte a formar parte de La Faviconera, un directorio de 16x16 que he creado para la promoción de los blogs, te dejo la url para que, si te apetece, unirte.

lafaviconera.blogspot.com

Un saludo y gracias.

Responder
Gem@

yz Gracias por la invitación Miguel Angel :)
Es cierto que hay mucho por aprender, y no creas que hay fecha para terminar porque cuando creas que está listo verás algo que te gusta más.
Mantener un blog es muy gratificante siempre que se tenga ilusión por ello, espero que la tuya dure mucho tiempo ;)

Responder
Gem@

yz Gracias Raúl Montero muy amable :)

Responder
FashiongirL

Hola gemma!! tu blog es maravilloso pero tengo varios problemas con el mio a ver si me los pudieses resolver jeje...

1ºQuiero poner un fondo en mi blog como el k tu tienes por ejemplo, encontre una pagina

http://www.thecutestblogontheblock.com/free-backgrounds/free-backgrounds/item/706/asInline

el problema...esta en ingles y medio la entiendo pero no se donde tengo que colocar el codigo...podrias explicarmelo EN ESPAÑOl jeje O DECIRME alguna otra pagina similar??

2º tb tengo problemas para poder instalar el bloqueo del boton derecho...no encuentro donde tengo que colocar el codigo.

SOY MUY PATOSA Y ME ENCANTARIA Q ME RESOLVIERAS ESTAS DUDAS Q ESTAR HARTA DE DE LEER PERO LO SIENTO.UN SALUDO Y MARAVILLO BLOG DE VERDAD GRACIAS!!

Responder
Gem@

yz Hola Coral has tenido suerte porque aquí hablamos español y clarito :)
Ese tipo de fondo se añade en cualquier gadget, vas a plantilla de diseño y editas un nuevo gadget escogiendo HTML.... en su interior pegas el código que proporciona donde dice: "Copy & Paste This Code:"

Para inhabilitar el botón derecho mira aquí ;)
Suerte!!

Responder
docencia

Una pregunta tonta.. tengo blogger.. ¿como instalo el script??? :( no tengo ni idea 11

Responder
Jose

Hola otra vez, Gem@. Ya he puesto en práctica lo de Lytebox y funciona muy bien, aunque me pasa una cosa muy rara. Verás, cuando entré por primera vez a ver el vídeo de "Construyendo mundos por amor", se me abrió directamente a pantalla completa y en la pestaña ponía l.swf . Al hacer yo una prueba, se me abre siempre en la ventana modal y al ir a comprobarlo en el tuyo, resulta que a veces se me abre la ventana modal y otras, a pantalla completa. ¿Toy loco o qué?No sé qué pasa, la verdad. O...¿es que lo puedes elegir tú? En fin, espero que me ilumines un poquito. Besitos. Y mi plantilla, sin prisas.

Responder
Jose

Gem@, si me lo permites, me gustaría contestar a Formador Ocupacional con su duda. Mira, arriba, en el tercer o cuarto párrafo, resaltado en rojo dice: "añadir lytebox". Es un enlace que te lleva al post donde Gem@ te explica paso a paso cómo descargar los script y dónde colocarlos en la plantilla para usar Lytebox. Si la duda persiste, no dudes en volver a preguntar.
Jeje.No ha quedado mal,¿no? Gracias Gem@.(Y perdón por la intromisión).

Responder
Inés

Hola Gema, tengo un pequeño problema y es que cuando se abre la ventana modal, no me aparece como en tu caso el icono (la cruz) para cerrar la ventana en la parte inferior derecha, ¿cómo puedo añadirlo?
Muchísimas gracias de antemano

Responder
Gem@

yz Formador Ocupacional ninguna pregunta es tonta si tiene respuesta :)
Como bien indica Jose hay un enlace en "añadir Lytebox" que te lleva a la entrada donde está incluido el script ;)

yz Hola Jose tienes todo el permiso del mundo para colaborar, es más se agradece muchísimo :)
Sobre el problema que me comentas no estás loco, me di cuenta de ese detalle hace unos días cuando me preguntaron la forma de ver el vídeo a pantalla completa, la respuesta hasta ahora es que cuando la página no ha terminado de cargar si hacemos click sobre el vídeo se muestra a pantalla completa mientras que si lo hacemos con la página cargada se muestra en la medida establecida :)
¿No estaremos volviendo turuletas?

yz Inés en el archivo CSS viene por defecto una imagen de "cerrar" que yo la sustituí por esa que ves, puedes hacer lo mismo y sustituir las imágenes de los estilos por otras tuyas.
Si te gusta la que yo tengo puedes hacer lo siguiente:
Busca en el archivo CSS donde dice:
#lbClose.grey ... más código.

Y esa línea la sustituyes por esta:
#lbClose.grey { background: url(http://1.bp.blogspot.com/_q4j3j-JA2ro/SdaEc8-lCII/AAAAAAAAJ34/sNTPDECEq50/s320/closebox.png) no-repeat; }

Responder
Eguren

¡Este blog es un hallazgo!.Gracias por la paciencia que muestras. Sigo puliendo mi "engendro".¿Se puede eliminar el cuadrito con destornillador-llave que aparece cada vez que incorporas un accesorio?. Me parece que no tiene nada que ver con la plantilla, sino con la forma de trabajar de Blogger.Un beso.N.

Responder
Gem@

yz así es Nuria nada tiene que ver con la plantilla y si con facilitarte trabajo.
Esos iconos llamados de edición rápida sólo los ve el autor del blog cuando está logueado.
Nos permiten acceder a un gadget o las entradas en caso de tener que modificar algo sin necesidad de retroceder a la plantilla de diseño.
Puedes hacer dos cosas eliminarlo definitivamente o desactivarlo, esta última es la más práctica y sencilla porque lo puedes activar cuando tu decidas.
Ve a Configuración | Básico y marca NO en ¿Mostrar Edición rápida en tu blog? con eso ya no lo verás ;)

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top